<template>
	<div class="x-city-picker">
		<div :style="'width:'+colWidth+'px'" class="x-city-picker_cityItem">
			<el-select v-model="provinceValue" placeholder="请选择" @change="changeProvince" :disabled="readonly" :size="size">
				<el-option v-for="item in province" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div :style="'width:'+colWidth+'px'" class="x-city-picker_cityItem" v-if="0<cityNumber">
			<el-select v-model="cityValue" placeholder="请选择" @change="changeCity" :disabled="readonly" :size="size">
				<el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div :style="'width:'+colWidth+'px'" class="x-city-picker_cityItem" v-if="1<cityNumber">
			<el-select v-model="areaValue" placeholder="请选择" @change="changeArea" :disabled="readonly" :size="size">
				<el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
      widget: {},
			colWidth: {
				default: 110
			},
			value: {},
			readonly: {
				default: false
			},
			introHtml: {},
			requiredFool: {},
      size: {}
		},
		data() {
			return {
				province: '',
				provinceValue: '',
				cityList: '',
				city: '',
				cityValue: '',
				areaList: '',
				area: '',
				areaValue: '',
        cityNumber: 2
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
        if(this.widget.type==='ProvinceDropListControl') {
          this.cityNumber = 0
        }else if(this.widget.type==='CityDropListControl') {
          this.cityNumber = 1
        } else {
          this.cityNumber = 2
        }
				var addressAll = await this.$api.addressAll()
				this.province = addressAll.province
				this.provinceValue = this.province[0].value
				this.cityList = addressAll.city
				this.city = addressAll.city[0]
				this.cityValue = this.city[0].value
				this.areaList = addressAll.area
				this.area = this.areaList[0][0]
				this.areaValue = this.areaList[0][0][0].value
				// 数据回绑
				var value
				if (this.value) {
					value = this.value.toString()
				}
				var adderssString = ''
				if (!this.$ala.strIsEmpty(this.value)) {
					this.province.forEach((item, index) => {
						if (String(item.value) === value.substring(0, 2)) {
							this.provinceValue = item.value
							adderssString += item.label
							if (value.length === 2) {
								if (item.value === value) {
									this.areaValue = item.value
								}
							}
							this.city = this.cityList[index]
							this.city.forEach((city, num) => {
								if (city.value === value.substr(0, 4)) {
									this.cityValue = city.value
									adderssString += city.label
									if (value.length === 4) {
										if (city.value === value) {
											this.areaValue = city.value
										}
									}
									this.area = this.areaList[index][num]
									this.area.forEach((area) => {
										if (value.length === 6) {
											if (area.value === value) {
												this.areaValue = area.value
												adderssString += area.label
											}
										}
									})
								}
							})
						}
					})
				}
				this.$emit('executeOneChange', adderssString)
			},
			changeProvince(val) {
				if (!this.readonly) {
					this.province.forEach((provinceValue, provinceIndex) => {
						if (provinceValue.value === val) {
							this.city = this.cityList[provinceIndex]
							this.cityValue = this.cityList[provinceIndex][0].value
							this.area = this.areaList[provinceIndex][0]
							this.areaValue = this.areaList[provinceIndex][0][0].value
							this.$emit('changePicker', this.areaValue)
						}
					})
				}
			},
			changeCity(val) {
				if (!this.readonly) {
					this.cityList.forEach((cityValue, cityIndex) => {
						cityValue.forEach((cVal, cIndex) => {
							if (cVal.value === val) {
								this.area = this.areaList[cityIndex][cIndex]
								this.areaValue = this.areaList[cityIndex][cIndex][0].value
								this.$emit('changePicker', this.areaValue)
							}
						})
					})
				}
			},
			changeArea(val) {
				if (!this.readonly) {
					this.$emit('changePicker', val)
				}
			}
		},
		watch: {
			areaValue(val) {
				var city = val
				this.$emit('input', city)
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang='scss'>
	.x-city-picker {
		display: flex;

		.el-input--mini {
			.el-input__inner {
				height: 40px;
				line-height: 40px;
			}
		}

    .x-city-picker_cityItem{
      margin-right: 10px;
    }
	}

	.x-x-city-picker {
		background-color: #ffffff;
		margin-left: -230px;

		.el-form {
			.el-form-item {
				margin-bottom: 15px;
			}
		}
	}
</style>